<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://www.springframework.org/tags/form"  prefix="form" %>   
<%@ taglib tagdir="/WEB-INF/tags/byblos/" prefix="byblos" %>
<%@taglib uri='http://java.sun.com/jsp/jstl/core' prefix='c' %>
<!DOCTYPE html>
<html>
<head>
	<title>Byblos | new account</title>
	<script src="../js/jquery-2.0.3.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/jquery.validationEngine-en.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/jquery.validationEngine.js" type="text/javascript" ></script>		
	<link rel="stylesheet" href="../css/validationEngine.jquery.css" type="text/css"/>
	<link rel="stylesheet" href="../css/forms.screen.css" type="text/css"/>	
	<script>
		jQuery(document).ready(function(){
			// binds form submission and fields to the validation engine
			jQuery("#formAccount").validationEngine();
			
		});
		
	</script>
	<script type="text/javascript">	
	 $(document).ready(function() {
	/*
	* In-Field Label jQuery Plugin
	* http://fuelyourcoding.com/scripts/infield.html
	*
	* Copyright (c) 2009 Doug Neiner
	* Dual licensed under the MIT and GPL licenses.
	* Uses the same license as jQuery, see:
	* http://docs.jquery.com/License
	*
	* @version 0.1
	*/
	(function($) { $.InFieldLabels = function(label, field, options) { var base = this; base.$label = $(label); base.$field = $(field); base.$label.data("InFieldLabels", base); base.showing = true; base.init = function() { base.options = $.extend({}, $.InFieldLabels.defaultOptions, options); base.$label.css('position', 'absolute'); var fieldPosition = base.$field.position(); base.$label.css({ 'left': fieldPosition.left, 'top': fieldPosition.top }).addClass(base.options.labelClass); if (base.$field.val() != "") { base.$label.hide(); base.showing = false; }; base.$field.focus(function() { base.fadeOnFocus(); }).blur(function() { base.checkForEmpty(true); }).bind('keydown.infieldlabel', function(e) { base.hideOnChange(e); }).change(function(e) { base.checkForEmpty(); }).bind('onPropertyChange', function() { base.checkForEmpty(); }); }; base.fadeOnFocus = function() { if (base.showing) { base.setOpacity(base.options.fadeOpacity); }; }; base.setOpacity = function(opacity) { base.$label.stop().animate({ opacity: opacity }, base.options.fadeDuration); base.showing = (opacity > 0.0); }; base.checkForEmpty = function(blur) { if (base.$field.val() == "") { base.prepForShow(); base.setOpacity(blur ? 1.0 : base.options.fadeOpacity); } else { base.setOpacity(0.0); }; }; base.prepForShow = function(e) { if (!base.showing) { base.$label.css({ opacity: 0.0 }).show(); base.$field.bind('keydown.infieldlabel', function(e) { base.hideOnChange(e); }); }; }; base.hideOnChange = function(e) { if ((e.keyCode == 16) || (e.keyCode == 9)) return; if (base.showing) { base.$label.hide(); base.showing = false; }; base.$field.unbind('keydown.infieldlabel'); }; base.init(); }; $.InFieldLabels.defaultOptions = { fadeOpacity: 0.5, fadeDuration: 300, labelClass: 'infield' }; $.fn.inFieldLabels = function(options) { return this.each(function() { var for_attr = $(this).attr('for'); if (!for_attr) return; var $field = $("input#" + for_attr + "[type='text']," + "input#" + for_attr + "[type='password']," + "input#" + for_attr + "[type='tel']," + "input#" + for_attr + "[type='email']," + "textarea#" + for_attr); if ($field.length == 0) return; (new $.InFieldLabels(this, $field[0], options)); }); }; })(jQuery);	
		 $("#formAccount label").inFieldLabels();
	});
	
	</script>
	
</head>

<body>
	<div id="registration">
		<h2>Create your account</h2>
		<form id="formAccount" method="post" action="submit">
		  <fieldset>
			<p class="formseparator"><label for="username">User name</label> <input type="text" id="username" name="userName" class="validate[required]" value="" /><form:errors path="userName" cssClass="error" /></p>
			<p><label for="pwd">Password</label> <input type="password" id="pwd" name="pwd" class="validate[required]"/><form:errors path="pwd" cssClass="error" />	</p>
			<p class="formseparator"><label for="cpwd">Confirm password</label> <input type="password" id="cpwd" name="cpwd" class="validate[required,equals[pwd]]" value=""/><form:errors path="cpwd" cssClass="error" /></p>
			<input type="hidden" name="userType" value="user" />	
			<p><label for="email">Email</label> <input type="email" id="email" name="email" class="validate[required,custom[email]]"/><form:errors path="email" cssClass="error" />	</p>
			<p class="formseparator"><label for="cemail">Confirm email</label> <input type="email" id="cemail" name="cemail" class="validate[required,custom[email],equals[email]]"/><form:errors path="cemail" cssClass="error" />	</p>		
			<input type="submit" value="Create your account" />
		  </fieldset>
		</form>	
	</div>
</body>
</html>